<template>
	<view>
		<view class="period" v-if="timepopup" @click="timepopup=false"></view>
		<view class="picker-box" :style="{bottom:timepopup?'0':'-612rpx'}">
			<!-- <view class="selected-date">{{yearStart}}年{{monthStart}}月{{dayStart}}日</view>
			<view class="selected-date">{{yearEnd}}年{{monthEnd}}月{{dayEnd}}日</view> -->
			<view class="picker-top">
				<view class="top-left" @click="timepopup=false">取消</view>
				<view class="top-con">选择时间</view>
				<view class="top-right" @click="timeOk">确定</view>
			</view>
			<view class="time" v-if="isEnd">
				<view class="time_start" :class="[startOrEnd?'time_active':'time_active1']" @click="start">开始时间</view>
				<view class="time_end" :class="[startOrEnd?'time_active1':'time_active']" @click="end">结束时间</view>
			</view>
			<!-- 开始日期 -->
			<view class="start_list" v-show="startOrEnd">
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="valueStart" @change="bindChange" v-if="mode=='date'">
					<picker-view-column>
						<view v-for="(item,index) in years" :key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in months" :key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in days" :key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
					</picker-view-column>
				</picker-view>
				
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="timeStart" @change="bindChange" v-if="mode=='time'">
					<picker-view-column>
						<view v-for="(item,index) in hours" :key="index" style="line-height: 50px; text-align: center;">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in minutes" :key="index" style="line-height: 50px; text-align: center;">{{item}}</view>
					</picker-view-column>
				</picker-view>
				
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="datetimeStart" @change="bindChange" v-if="mode=='datetime'">
					<picker-view-column>
						<view v-for="(item,index) in years" :key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in months" :key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in days" :key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in hours" :key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in minutes" :key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<!-- 结束日期 -->
			<view class="end_list" v-show="!startOrEnd">
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="valueEnd" @change="bindChange1" v-if="mode=='date'">
					<picker-view-column>
						<view v-for="(item,index) in years" :key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in monthsT" :key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in daysT" :key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
					</picker-view-column>
				</picker-view>
				
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="timeEnd" @change="bindChange1" v-if="mode=='time'">
					<picker-view-column>
						<view v-for="(item,index) in hours" :key="index" style="line-height: 50px; text-align: center;">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in minutes" :key="index" style="line-height: 50px; text-align: center;">{{item}}</view>
					</picker-view-column>
				</picker-view>
				
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 234px;" :value="datetimeEnd" @change="bindChange1" v-if="mode=='datetime'">
					<picker-view-column>
						<view v-for="(item,index) in years" :key="index" style="line-height: 50px; text-align: center;">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in monthsT" :key="index" style="line-height: 50px; text-align: center;">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in daysT" :key="index" style="line-height: 50px; text-align: center;">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in hours" :key="index" style="line-height: 50px; text-align: center;">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in minutes" :key="index" style="line-height: 50px; text-align: center;">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	const date = new Date()
	const beforeDate = new Date(date.getTime() - 24*60*60*1000); //前一天
	const years = []
	const months = []
	const days = []
	const hours = []
	const minutes = []
	let yearStart = date.getFullYear()
	let yearEnd = date.getFullYear()
	
	let monthStart = beforeDate.getMonth()+1
	let monthEnd = date.getMonth()+1
	
	let dayStart = beforeDate.getDate()
	let dayEnd = date.getDate()
	
	monthStart = monthStart<10?'0'+monthStart:monthStart
	monthEnd = monthEnd<10?'0'+monthEnd:monthEnd
	dayStart = dayStart<10?'0'+dayStart:dayStart
	dayEnd = dayEnd<10?'0'+dayEnd:dayEnd
	
	// 小时
	for(let i = 0; i <= 23; i++){
		if(i<10){i='0'+i}
		hours.push(i)
	}
	//分
	for(let i = 0; i<=59;i++){
		if(i<10){i='0'+i}
		minutes.push(i)
	}
	
	function getDaysOfMonth(year,month){
	    var date=new Date(year,month,0);
	    var days=date.getDate();
	    return days;
	}
	
	export default {
		props:{
			mode:String,
			isEnd:{
				type: Boolean,
				default: true
			},
		},
		mounted() {
			const date1 = new Date()
			const beforeDate = new Date(date.getTime() - 24*60*60*1000); //前一天
			
			let hourStart = date1.getHours()
			let hourEnd = date1.getHours()
			
			let minuteStart  = date1.getMinutes()
			let minuteEnd = date1.getMinutes()
			
			this.hourStart = hourStart<10?'0'+hourStart:hourStart
			this.hourEnd = hourEnd<10?'0'+hourEnd:hourEnd
			this.minuteStart = minuteStart<10?'0'+minuteStart:minuteStart
			this.minuteEnd = minuteEnd<10?'0'+minuteEnd:minuteEnd
			
			if(this.isEnd){
				for (let i = 1990; i <= date.getFullYear(); i++) {
				  this.years.push(i)
				}
				for (let i = 1; i <= monthEnd; i++) {
					if(i<10){i='0'+i}
					this.months.push(i)
					this.monthsT.push(i)
				}
			}else{
				for (let i = 1990; i <= date.getFullYear()+1; i++) {
				  this.years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					if(i<10){i='0'+i}
					this.months.push(i)
					this.monthsT.push(i)
				}
			}
			for (let i = 1; i <= getDaysOfMonth(yearStart,monthStart); i++) {
				if(i<10){i='0'+i}
				this.days.push(i)
				this.daysT.push(i)
			}
			setTimeout(() => {
				this.valueStart = [this.years.length-1,monthStart-1,dayStart-1]
				this.valueEnd = [this.years.length-1,monthEnd-1,dayEnd-1]
				
				this.timeStart = [hourStart,minuteStart]
				this.timeEnd = [hourEnd,minuteEnd]
				
				this.datetimeStart = [this.years.length-2,monthStart-1,dayStart-1,hourStart,minuteStart]
				if(this.isEnd){
					this.datetimeStart = [this.years.length-2,monthStart-1,dayStart-1,hourStart,minuteStart]
				}else{
					this.datetimeStart = [this.years.length-2,monthStart-1,dayStart,hourStart,minuteStart]
				}
				
				this.datetimeEnd = [this.years.length-2,dayEnd-1,hourStart,minuteStart]
			}, 10);
			
		},
		data(){
			return {
				years:[],
				
				yearStart,
				yearEnd,
				
				months:[],
				monthsT:[],
				monthStart,
				monthEnd,
				
				days:[],
				daysT:[],
				dayStart,
				dayEnd,
				
				hours,
				hourStart:'',
				hourEnd:'',
				
				minutes,
				minuteStart:'',
				minuteEnd:'',
				
				valueStart:[],
				valueEnd:[],
				
				timeStart:[],
				timeEnd:[],
				
				datetimeStart:[],
				datetimeEnd:[],
				
				startOrEnd:true,
				timepopup:false
			}
		},
		methods:{
			bindChange(e) {
				const val = e.detail.value
				this.days = []
				for (let i = 1; i <= getDaysOfMonth(yearStart,val[1]+1); i++) {
					if(i<10){i='0'+i}
					this.days.push(i)
				}
				// console.log(this.years[val[0]],yearStart)
				switch (this.mode){
					case 'date':
						this.months=[]
						this.yearStart= this.years[val[0]]
						if(this.yearStart != yearStart){
							for (let i = 1; i <= 12; i++) {
								if(i<10){i='0'+i}
								this.months.push(i)
							}
						}else{
							for (let i = 1; i <= monthEnd; i++) {
								if(i<10){i='0'+i}
								this.months.push(i)
							}
						}
						this.monthStart= this.months[val[1]]
						this.dayStart= this.days[val[2]]
						let time = [this.yearStart,this.monthStart,this.dayStart]
						this.$emit('valueStart',time)
						break;
					case 'time':
						this.hourStart= this.hours[val[0]]
						this.minuteStart= this.minutes[val[1]]
						let time1 = [this.hourStart,this.minuteStart]
						this.$emit('valueStart',time1)
						break;
					case 'datetime':
						this.yearStart= this.years[val[0]]
						this.monthStart= this.months[val[1]]
						if(this.isEnd){
							this.dayStart= this.days[val[2]]
						}else{
							this.dayEnd= this.days[val[2]]
						}
						this.hourStart= this.hours[val[3]]
						this.minuteStart= this.minutes[val[4]]
						let datetime = [this.yearStart,this.monthStart,this.dayStart,this.hourStart,this.minuteStart]
						// console.log(datetime)
						this.$emit('valueStart',datetime)
						break;
					default:
						break;
				}
			},
			bindChange1(e) {
				const val = e.detail.value
				this.daysT = []
				this.monthsT = []
				for (let i = 1; i <= getDaysOfMonth(yearStart,val[1]+1); i++) {
					if(i<10){i='0'+i}
					this.daysT.push(i)
				}
				switch (this.mode){
					case 'date':
						this.yearEnd= this.years[val[0]]
						if(this.yearEnd != yearStart){
							for (let i = 1; i <= 12; i++) {
								if(i<10){i='0'+i}
								this.monthsT.push(i)
							}
						}else{
							for (let i = 1; i <= monthEnd; i++) {
								if(i<10){i='0'+i}
								this.monthsT.push(i)
							}
						}
						this.monthEnd= this.monthsT[val[1]]
						this.dayEnd= this.daysT[val[2]]
						let time = [this.yearEnd,this.monthEnd,this.dayEnd]
						this.$emit('valueEnd',time)
						break;
					case 'time':
						this.hourEnd= this.hours[val[0]]
						this.minuteEnd= this.minutes[val[1]]
						let time1 = [this.hourEnd,this.minuteEnd]
						this.$emit('valueEnd',time1)
						break;
					case 'datetime':
						this.yearEnd= this.years[val[0]]
						this.monthEnd= this.months[val[1]]
						this.dayEnd= this.daysT[val[2]]
						this.hourEnd= this.hours[val[3]]
						this.minuteEnd= this.minutes[val[4]]
						let datetime = [this.yearEnd,this.monthEnd,this.dayEnd,this.hourEnd,this.minuteEnd]
						this.$emit('valueEnd',datetime)
						break;
					default:
						break;
				}
			},
			start(){
				this.startOrEnd=true
				// console.log('开始')
			},
			end(){
				this.startOrEnd=false
				// console.log('结束')
			},
			// 动画
			timePopUp(){
				this.timepopup=true
				this.startOrEnd=true
			},
			// 确定
			timeOk(){
				if(this.mode=='date'){
					let valueStart = this.yearStart+'-'+this.monthStart+'-'+this.dayStart
					let valueEnd = this.yearEnd+'-'+this.monthEnd+'-'+this.dayEnd
					let time = [valueStart,valueEnd]
					this.$emit('click',time)
					// console.log(time,123456)
				}else if(this.mode=='time'){
					let valueStart = this.hourStart+':'+this.minuteStart
					let valueEnd = this.hourEnd+':'+this.minuteEnd
					let time1 = [valueStart,valueEnd]
					this.$emit('click',time1)
					// console.log(time1,123456)
				}else if(this.mode=="datetime"){
					let valueStart
					if(this.isEnd){
						valueStart = this.yearStart+'-'+this.monthStart+'-'+this.dayStart +' '+this.hourStart+':'+this.minuteStart
					}else{
						valueStart = this.yearStart+'-'+this.monthStart+'-'+this.dayEnd +' '+this.hourStart+':'+this.minuteStart
					}
					let valueEnd = this.yearEnd+'-'+this.monthEnd+'-'+this.dayEnd+' '+this.hourEnd+':'+this.minuteEnd
					let datetime = [valueStart,valueEnd]
					this.$emit('click',datetime)
					// console.log(datetime,123456)
				}
				this.timepopup=false
			},
			reset(){
				this.months=[]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.period{position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: rgba(88, 88, 88, .47);z-index: 3;}
	.picker-box{height: 612rpx;width: 100%;background-color: #fff;position: fixed;bottom: -612rpx;z-index: 4;transition: all 0.3s;
		.picker-top{display: flex;justify-content: space-between;height: 84rpx;align-items: center;margin-bottom: 52rpx;padding: 0 20rpx;border-bottom: 1px solid #F5F5F5;
			.top-left,.top-con,.con-right{font-size: 32rpx;}
			.top-left{color: #C1C1C1;}
			.top-con,.top-right{color: #555555;}
		}
		.time{height: 54rpx;line-height:54rpx;width: 376rpx;margin: 0 auto;display: flex;justify-content: center;border: 1px solid #358FE2;border-radius: 4rpx;margin-bottom: 60rpx;
			.time_start,.time_end{flex:1;text-align: center;font-size: 28rpx;
				&.time_active{background-color: #358FE2;color: #FFFFFF;}
				&.time_active1{background-color: #FFFFFF;color: #358FE2;}
			}
		}
	}
	
	
</style>
